<!--
 * @Description: 
 * @Author: 赵华宇
 * @Date: 2025-04-22 11:41:37
 * @LastEditors: 赵华宇
 * @LastEditTime: 2025-04-22 14:32:31
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            /* display:inline-block; 默认是inline-block 行内块元素 */
            /* display: inline; 默认inline 行内元素 */
        }
        .div1{
            background-color: red;
        }
        .div2{
            background-color: blanchedalmond;
        }
        /* 行内元素 一行可以有多个尺寸由内容决定 如果加宽高不生效 */
        .span1{
            background-color: blue;
        }
        .span2{
            background-color: orange;
        }
        /* 行内块元素  一行共存多个 默认尺寸由内容决定 加宽高生效*/
        img{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <!-- 块级元素 -->
    <div class="div1">div 标签1</div>
    <div class="div2">div 标签2</div>
    <!-- 行内元素 -->
     <span class="span1">span11111111</span>
     <span class="span2">span2</span>
    <!-- 行内块元素 -->
     <img src="../bookcover/101.jpg" alt="">
     <img src="../bookcover/102.jpg" alt="">
</body>
</html>